<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style type="text/css">
        .parent {
            display: flex;
            width: 120px;

        }
        .parent > div {
            height: 100px;
        }
        .item-1 {
            width: 10px;
            flex-grow: 3;
            background: blue;
        }
        .item-2 {
            width: 20px;
            flex-grow: 2;
            background: yellow;
        }
        .item-3 {
            width: 30px;
            flex-grow: 1;
            background: lightblue;
        }
        #container {
            display:flex;
        }
        #container div:first-child{
            width:50px;
            background: red;
        }
        #container div:nth-child(2){

            /*width: 100px;*/
            flex-basis:auto;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>
<br>
<div id="container">
    <div>1</div>
    <div>22222</div>
</div>

</body>
</html>
